<template>
  <view class="container">
    <view class="order-detail">
      <view v-if="userAddr" class="delivery-addr">
        <view class="user-info">
          <text class="item">
            {{ userAddr.consignee }}
          </text>
          <text class="item">
            {{ userAddr.phone }}
          </text>
        </view>
        <view class="addr">
          {{ userAddr.provinceName }}{{ userAddr.cityName }}{{ userAddr.districtName }}
          {{ userAddr.detail }}
        </view>
      </view>

      <!-- 商品信息 -->
      <view v-if="orderItem" class="prod-item">

          <view class="item-cont" :data-prodid="orderItem.id" @tap="toProdPage">
            <view class="prod-pic">
              <image :src="orderItem.picture" />
            </view>
            <view class="prod-info">
              <view class="prodname">
                {{ orderItem.title }}
              </view>
              <view class="prod-info-cont">
                <text class="number">
                  数量：1
                </text>
                <text class="info-item">
                  {{ orderItem.storage }}
                </text>
              </view>
              <view class="price-nums clearfix">
                <text class="prodprice">
                  <text class="symbol">
                    ￥
                  </text>
                  <text class="big-num">
                    {{ wxs.parsePrice(orderItem.price)[0] }}
                  </text>
                  <text class="small-num">
                    .{{ wxs.parsePrice(orderItem.price)[1] }}
                  </text>
                </text>
                <view class="btn-box" />
              </view>
            </view>
          </view>

      </view>

      <!-- 订单信息 -->
      <view class="order-msg">
        <view class="msg-item">
          <view class="item">
            <text class="item-tit">
              订单编号：
            </text>
            <text class="item-txt">
              {{ orderNumber }}
            </text>
          </view>
          <view class="item">
            <text class="item-tit">
              下单时间：
            </text>
            <text class="item-txt">
              {{ createTime }}
            </text>
          </view>
          <view class="item"  v-if="payTime!=null">
            <text class="item-tit">
              支付时间：
            </text>
            <text class="item-txt">
              {{ payTime }}
            </text>
          </view>
        </view>
        <view class="msg-item">
          <view class="item" v-if="payName!=null">
            <text class="item-tit">
              支付方式：
            </text>
            <text class="item-txt">
              {{ payName }}
            </text>
          </view>
          <view class="item">
            <text class="item-tit">
              配送方式：
            </text>
            <text class="item-txt">
              普通配送
            </text>
          </view>
        </view>
      </view>

      <view class="order-msg">
        <view class="msg-item">
          <view class="item">
            <view class="item-tit">
              订单总额：
            </view>
            <view class="item-txt price">
              <text class="symbol">
                ￥
              </text>
              <text class="big-num">
                {{ wxs.parsePrice(total)[0] }}
              </text>
              <text class="small-num">
                .{{ wxs.parsePrice(total)[1] }}
              </text>
            </view>
          </view>

          <view class="item payment" v-if="status>2">
            <view class="item-txt price">
              实付款：
              <text class="symbol">
                ￥
              </text>
              <text class="big-num">
                {{ wxs.parsePrice(total)[0] }}
              </text>
              <text class="small-num">
                .{{ wxs.parsePrice(total)[1] }}
              </text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  const wxs = number()

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad((options) => {
    loadOrderDetail(options.orderNum)
  })

  /**
   * 跳转商品详情页
   * @param e
   */
  const toProdPage = (e) => {
    const prodid = e.currentTarget.dataset.prodid
    uni.navigateTo({
      url: '/pages/prod/prod?goodsId=' + prodid
    })
  }

  const remarks = ref('')
  const orderItem = ref([])
  const status = ref(0)
  const userAddr = ref(null)
  const orderNumber = ref('')
  const createTime = ref('')
  const payTime = ref('')
  const total = ref(0) // 商品总额
  const payName=ref('')
  /**
   * 加载订单数据
   */
  const loadOrderDetail = (orderNum) => {
    uni.showLoading() // 加载订单详情
    http.request({
        url: '/orders/query',
        method: 'GET',
        data: {
          orderId: orderNum
        }
      })
      .then(({
        data
      }) => {
        orderNumber.value = orderNum
        userAddr.value = data.userAddr
        orderItem.value = data.goods
        createTime.value = data.createTime
        payTime.value = data.payTime
        status.value = data.status
        total.value = data.total
        payName.value=data.payName
        uni.hideLoading()
      })
  }

</script>

<style scoped lang="scss">
  @use './order-detail.scss';
</style>
